<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>jQuery-QRCode</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <script type="text/javascript" th:src="@{js/jquery.qrcode.min.js}"></script>
    <script type="text/javascript" th:src="@{js/qrcode.js}"></script>
</head>

<body>
    <h1>使用jQuery.qrcode|qrcode显示二维码</h1>

    <p>Render in table</p>
    <div>
        <input id="qrcode_table_input" type="text" value="" placeholder="输入数据:">
        <button id="qrcode_table_btn">JQUERY 显示[TABLE]二维码</button>
    </div>
    <div id="qrcodeTable">

    </div>
    <p>Render in canvas</p>
    <div>
        <input id="qrcode_canvas_input" type="text" value="" placeholder="输入数据:">
        <button id="qrcode_canvas_btn">JQUERY 显示[CANVAS]二维码</button>
    </div>
    <div id="qrcodeCanvas"></div>

    <script>
<!--
        // 默认为canvas
        $('#qrcode').qrcode("http://jetienne.com");



        $('#qrcodeTable').qrcode({
            render: "table",
            text: "http://jetienne.com"
        });
        $('#qrcodeCanvas').qrcode({
            text: "http://jetienne.com"
        });
-->

        $("#qrcode_table_btn").click(function () {
            var qrcode_table_input = $("#qrcode_table_input").val();

            if (typeof (qrcode_table_input) != "undefined" && qrcode_table_input != "") {
                $('#qrcodeTable').html("");
                $('#qrcodeTable').qrcode({
                    render: "table",
                    text: qrcode_table_input
                });
            }

        });
                $("#qrcode_canvas_btn").click(function () {
            var qrcode_canvas_input = $("#qrcode_canvas_input").val();

            if (typeof (qrcode_canvas_input) != "undefined" && qrcode_canvas_input != "") {
                $('#qrcodeCanvas').html("");
                    $('#qrcodeCanvas').qrcode({
                        text: qrcode_canvas_input
                    });
            }

        });
    </script>
</body>

</html>